<template>
  <div class="Lineas">
    <div id="inoutCharts" style="width: 100%; height: 450px"></div>
  </div>
</template>

<script>
export default {
  name: 'inoutCharts',
  props: ['homesumList'],
  methods: {
    myEcharts () {
      const time = this.homesumList.x
      const title = this.homesumList.data
      const source = []
      for (let i = 0; i < time.length; i++) {
        const a = {}
        a.product = time[i]
        a.出库 = title[0].data[i]
        a.入库 = title[1].data[i]
        source.push(a)
      }
      const myChart = this.$echarts.init(
        document.getElementById('inoutCharts')
      )
      // 配置图表
      const option = {
        color: ['rgba(255, 113, 0, 1)', 'rgba(255, 178, 0, 1)'],
        legend: {},
        tooltip: {},

        dataset: {
          dimensions: ['product', '出库', '入库'],
          source: source
        },
        xAxis: {
          type: 'category',
          lineStyle: {
            color: '#7B68EE'
          }
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }]
      }
      myChart.setOption(option)
    },
    changeFn () {
      setTimeout(() => {
        this.myEcharts()
      }, 500)
    }
  },
  mounted () {
    setTimeout(() => {
      this.myEcharts()
    }, 500)
  }
}
</script>

<style></style>
